import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";
import DataSet from '@antv/data-set';
import Slider from 'bizcharts-plugin-slider';
const ds = new DataSet({
  state: {
    start: 0,
    end: 1,
  },
});

class LineStatistical extends React.Component {
  handleSliderChange = e => {
    // console.log(e);
    const { startRadio, endRadio } = e;
    ds.setState('start', startRadio);
    ds.setState('end', endRadio);
  };
  render() {
    const data = this.props.dataSource;
    console.log(data);
    const cols = {
      value: {
        min: 0,
        range: [0, 0.93],
        alias: '次'
      },
      year: {
        range: [0, 0.9],
        alias: '时间'
      }
    };
    const dv = ds.createView().source(data);
    dv.transform({
      type: 'filter',
      callback(item, idx) {
        const radio = idx / data.length;
        return radio >= ds.state.start && radio <= ds.state.end;
      },
    });
    return (
      <div>
        <Chart height={280} forceFit={true} data={dv} scale={cols} padding='auto'>
          <Axis name="year" title={{
            position: 'end',
            offset: 15,
            textStyle: {
              fontSize: '12',
              textAlign: 'center',
              fill: '#999',
              fontWeight: 'bold',
              rotate: 0,
              autoRotate: true
            }
          }} />
          <Axis name="value" title={{
            position: 'end',
            offset: 5.5,
            textStyle: {
              fontSize: '12',
              textAlign: 'right',
              fill: '#999',
              fontWeight: 'bold',
              rotate: 0
            }
          }} />
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom type="line" position="year*value" size={2} color={['#75DEB4']}
            tooltip={['year*value', (year, value) => {
              return {
                name: '数值', // 要显示的名字
                value: value,
                title: year
              }
            }]} />
          <Geom
            color={['#75DEB4']}
            type="point"
            position="year*value"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
            tooltip={['year*value', (year, value) => {
              return {
                name: '数值', // 要显示的名字
                value: value,
                title: year
              }
            }]}
          />
        </Chart>
        <Slider
          data={data}
          padding={60}
          xAxis="year"
          yAxis="value"
          onChange={this.handleSliderChange}
        />
      </div>
    );
  }
}

export default LineStatistical
